<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.统一暴露：
            暴露语法：
            export{xxx，xxx}

            引入语法：import负责引入某个模块
            import XXXX from '模块标识'（模块标识：1.第三方模块直接写模块名即可2.自定义模块（就是文件名）必须书写路径，可以省略后缀）
            {xxx,xxx}就是想从暴露的对象中拿到的某些具体的对象（比如一个js文件中有很多方法）

            import * as 别名 from '模块标识'：引入当前模块中所有暴露的内容，组成一个对象，并随便取一个别名
            举例：
            import {拿到模块中暴露的具体内容
                aaa,
                bbb,
                ccc
            } from './calc'
            引入calc所有暴露的内容，并组成一个对象 对象名为calc
            import * as calc from './calc'
     -->
     <!-- 
        2.分别暴露：
            暴露语法：在完整的声明语句前添加export关键字，可以暴露当前声明的变量
            举例: export const person = {
                    name: "laowang",
                    age: 18
                }
            引入语法：与统一暴露一致
      -->
      <!-- 
        3.默认暴露（当前模块只需要暴露一个功能，就选默认暴露）：并不是直接暴露某个值，本质上仍是暴露的一个对象
            暴露语法：export default xxx
            引入语法：import xxx from './add'

       -->
       <!-- 重名：引入时如果有重名的方法，在编译时就会报错，所以就要用as取个别名 -->
       <!-- ES6模块化的编译 
    
        1.使用babel（开发依赖，上线时不需要的工具）把ES6模块化语法编译为CommonJS模块化

            首先安装babel：npm install --save-dev @babel/core @babel/cli @babel/preset-env
            第一个是babel的核心包，第二个是babel的命令包，第三个是babel的预设包
            再在package.json中配置预设"babel": {"presets": ["@babel/env"]}

            因为babel不是在全局安装的，所以没有babel这个命令，要使用npx babel 目标文件夹 -d  新文件夹 ，
            npx是启动本地命令

        2.再使用browserify把CommonJS模块化编译为浏览器识别的语法
    
        -->
</body>
</html>